<template>
  <MenuHeader />
  <!-- sidebar-cart start -->
  <div class="sidebar-cart onepage-sidebar-area">
    <div class="wrap-sidebar">
      <div class="sidebar-cart-all">
        <div class="sidebar-cart-icon">
          <button class="op-sidebar-close">
            <span class="ion-android-close"></span>
          </button>
        </div>
        <div class="cart-content">
          <h3>Shopping Cart</h3>
          <ul>
            <li class="single-product-cart">
              <div class="cart-img">
                <a href="#"><img src="../assets/picture/1.jpg" alt="" /></a>
              </div>
              <div class="cart-title">
                <h3><a href="#"> HANDCRAFTED MUG</a></h3>
                <span>1 x $140.00</span>
              </div>
              <div class="cart-delete">
                <a href="#"><i class="ion-ios-trash-outline"></i></a>
              </div>
            </li>
            <li class="single-product-cart">
              <div class="cart-img">
                <a href="#"><img src="../assets/picture/2.jpg" alt="" /></a>
              </div>
              <div class="cart-title">
                <h3><a href="#"> HANDCRAFTED MUG</a></h3>
                <span>1 x $140.00</span>
              </div>
              <div class="cart-delete">
                <a href="#"><i class="ion-ios-trash-outline"></i></a>
              </div>
            </li>
            <li class="single-product-cart">
              <div class="cart-img">
                <a href="#"><img src="../assets/picture/3.jpg" alt="" /></a>
              </div>
              <div class="cart-title">
                <h3><a href="#"> HANDCRAFTED MUG</a></h3>
                <span>1 x $140.00</span>
              </div>
              <div class="cart-delete">
                <a href="#"><i class="ion-ios-trash-outline"></i></a>
              </div>
            </li>
            <li class="single-product-cart">
              <div class="cart-total">
                <h4>Total : <span>$ 120</span></h4>
              </div>
            </li>
            <li class="single-product-cart">
              <div class="cart-checkout-btn">
                <a class="btn-hover cart-btn-style" href="#">view cart</a>
                <a class="no-mrg btn-hover cart-btn-style" href="#">checkout</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="block text-center" m="t-4">
    <el-carousel trigger="click" height="150px">
      <el-carousel-item v-for="item in data.banner" :key="item">
        <div class="slider-li">
          <img :src="'http://168.138.163.187' + item.index_img" />
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
  <!-- main-search start -->
  <div class="main-search-active">
    <div class="sidebar-search-icon">
      <button class="search-close">
        <span class="ion-android-close"></span>
      </button>
    </div>
    <div class="sidebar-search-input">
      <form>
        <div class="form-search">
          <input
            id="search"
            class="input-text"
            value=""
            placeholder="Search Entire Store"
            type="search"
          />
          <button>
            <i class="ion-ios-search-strong"></i>
          </button>
        </div>
      </form>
    </div>
  </div>
  <!-- main-search start -->
  <div class="cur-lang-acc-active">
    <div class="wrap-sidebar">
      <div class="sidebar-nav-icon">
        <button class="op-sidebar-close">
          <span class="ion-android-close"></span>
        </button>
      </div>
      <div class="cur-lang-acc-all">
        <div class="single-currency-language-account">
          <div class="cur-lang-acc-title">
            <h4>Currency: <span>USD </span></h4>
          </div>
          <div class="cur-lang-acc-dropdown">
            <ul>
              <li><a href="#">EUR Euro</a></li>
            </ul>
          </div>
        </div>
        <div class="single-currency-language-account">
          <div class="cur-lang-acc-title">
            <h4>
              Language:
              <span
                ><img src="../assets/picture/english.png" alt="" /> English
              </span>
            </h4>
          </div>
          <div class="cur-lang-acc-dropdown">
            <ul>
              <li>
                <a href="#"
                  ><img src="../assets/picture/english.png" alt="" /> English
                </a>
              </li>
              <li>
                <a href="#"
                  ><img src="../assets/picture/es.png" alt="" /> spanish
                </a>
              </li>
              <li>
                <a href="#"
                  ><img src="../assets/picture/fr.png" alt="" /> french
                </a>
              </li>
              <li>
                <a href="#"
                  ><img src="../assets/picture/ge.png" alt="" /> german
                </a>
              </li>
              <li>
                <a href="#"
                  ><img src="../assets/picture/es.png" alt="" /> spanish
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="single-currency-language-account">
          <div class="cur-lang-acc-title">
            <h4>My Account:</h4>
          </div>
          <div class="cur-lang-acc-dropdown">
            <ul>
              <li><a href="#">Compare Products </a></li>
              <li><a href="#">Default welcome msg!</a></li>
              <li><a href="register.html">register</a></li>
              <li><a href="wishlist.html">My Wish List</a></li>
              <li><a href="login.html">Sign In </a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="banner-area pt-100 pb-70">
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-lg-3 col-12">
          <div class="single-banner mb-30">
            <a href="shop-grid-view-sidebar.html"
              ><img src="static/picture/111.jpg" alt=""
            /></a>
            <div class="banner-content banner-content-position1">
              <h3>morden <span>{{data.}}</span></h3>
              <p>
                Sale up to <span>30% off</span> all product in the new
                collection
              </p>
            </div>
          </div>
        </div>
        <div class="d-sm-none d-lg-block col-lg-6 col-12">
          <div class="single-banner mb-30">
            <a href="shop-grid-view-sidebar.html"
              ><img src="static/picture/21.jpg" alt=""
            /></a>
            <div class="banner-content banner-content-position2">
              <span>Summer Sale</span>
              <h3>morden <span>chair</span></h3>
              <p>
                Sale up to <span>30% off</span> all product <br />in the new
                collection
              </p>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-3 col-12">
          <div class="single-banner mb-30">
            <a href="shop-grid-view-sidebar.html"
              ><img src="static/picture/31.jpg" alt=""
            /></a>
            <div class="banner-content banner-content-position3">
              <h3>morden <span>chair</span></h3>
              <p>
                Sale up to <span>30% off</span> all product in the new
                collection
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> -->
  <!-- <div class="product-area pb-100">
    <div class="container">
      <div class="section-title text-center mb-35">
        <h2>Featured Products</h2>
        <p>
          It is a long established fact that a reader will be distracted by the
          readable content of a page when look
        </p>
      </div>
      <div class="product-style">
        <div
          class="product-tab-list text-center mb-45 nav product-menu-mrg"
          role="tablist"
        >
          <a
            class="active"
            href="#home1"
            data-bs-toggle="tab"
            role="tab"
            aria-selected="true"
            aria-controls="home1"
          >
            <h4>NEW IN</h4>
          </a>
          <a
            href="#home2"
            data-bs-toggle="tab"
            role="tab"
            aria-selected="false"
            aria-controls="home2"
          >
            <h4>ON SALE</h4>
          </a>
          <a
            href="#home3"
            data-bs-toggle="tab"
            role="tab"
            aria-selected="false"
            aria-controls="home3"
          >
            <h4>FREE SHIPPING</h4>
          </a>
          <a
            href="#home4"
            data-bs-toggle="tab"
            role="tab"
            aria-selected="false"
            aria-controls="home4"
          >
            <h4>HIGHEST RATING</h4>
          </a>
        </div>
        <div class="tab-content jump">
          <div class="tab-pane active show fade" id="home1" role="tabpanel">
            <div class="product-slider-active gutter-space-30 owl-carousel">
              <div class="slide-item">
                <div class="single-product">
                  <div class="product-img">
                    <a href="#"
                      ><img src="../assets/picture/112.jpg" alt=""
                    /></a>
                    <span>sale</span>
                    <div class="product-action">
                      <a title="Wishlist" class="animate-left" href="#"
                        ><i class="ion-ios-heart-outline"></i
                      ></a>
                      <a
                        title="Quick View"
                        data-bs-toggle="modal"
                        data-bs-target="#exampleModal"
                        class="animate-right"
                        href="#"
                        ><i class="ion-ios-eye-outline"></i
                      ></a>
                    </div>
                  </div>
                  <div class="product-content">
                    <div class="product-title-price">
                      <div class="product-title">
                        <h4>
                          <a href="product-details-6.html">WOODEN FURNITURE</a>
                        </h4>
                      </div>
                      <div class="product-price">
                        <span>$110.00</span>
                      </div>
                    </div>
                    <div class="product-cart-categori">
                      <div class="product-cart">
                        <span>Furniter</span>
                      </div>
                      <div class="product-categori">
                        <a href="#"><i class="ion-bag"></i> Add to cart</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="slide-item">
                <div class="single-product">
                  <div class="product-img">
                    <a href="#"
                      ><img src="../assets/picture/25.jpg" alt=""
                    /></a>
                    <div class="product-action">
                      <a title="Wishlist" class="animate-left" href="#"
                        ><i class="ion-ios-heart-outline"></i
                      ></a>
                      <a
                        title="Quick View"
                        data-bs-toggle="modal"
                        data-bs-target="#exampleModal"
                        class="animate-right"
                        href="#"
                        ><i class="ion-ios-eye-outline"></i
                      ></a>
                    </div>
                  </div>
                  <div class="product-content">
                    <div class="product-title-price">
                      <div class="product-title">
                        <h4>
                          <a href="product-details-6.html">WOODEN FURNITURE</a>
                        </h4>
                      </div>
                      <div class="product-price">
                        <span>$120.00</span>
                      </div>
                    </div>
                    <div class="product-cart-categori">
                      <div class="product-cart">
                        <span>Furniter</span>
                      </div>
                      <div class="product-categori">
                        <a href="#"><i class="ion-bag"></i> Add to cart</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="slide-item">
                <div class="single-product">
                  <div class="product-img">
                    <a href="#"
                      ><img src="../assets/picture/32.jpg" alt=""
                    /></a>
                    <span>sale</span>
                    <div class="product-action">
                      <a title="Wishlist" class="animate-left" href="#"
                        ><i class="ion-ios-heart-outline"></i
                      ></a>
                      <a
                        title="Quick View"
                        data-bs-toggle="modal"
                        data-bs-target="#exampleModal"
                        class="animate-right"
                        href="#"
                        ><i class="ion-ios-eye-outline"></i
                      ></a>
                    </div>
                  </div>
                  <div class="product-content">
                    <div class="product-title-price">
                      <div class="product-title">
                        <h4>
                          <a href="product-details-6.html">HANDCRAFTED MUG</a>
                        </h4>
                      </div>
                      <div class="product-price">
                        <span>$130.00</span>
                      </div>
                    </div>
                    <div class="product-cart-categori">
                      <div class="product-cart">
                        <span>Furniter</span>
                      </div>
                      <div class="product-categori">
                        <a href="#"><i class="ion-bag"></i> Add to cart</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="slide-item">
                <div class="single-product">
                  <div class="product-img">
                    <a href="#"><img src="../assets/picture/4.jpg" alt="" /></a>
                    <div class="product-action">
                      <a title="Wishlist" class="animate-left" href="#"
                        ><i class="ion-ios-heart-outline"></i
                      ></a>
                      <a
                        title="Quick View"
                        data-bs-toggle="modal"
                        data-bs-target="#exampleModal"
                        class="animate-right"
                        href="#"
                        ><i class="ion-ios-eye-outline"></i
                      ></a>
                    </div>
                  </div>
                  <div class="product-content">
                    <div class="product-title-price">
                      <div class="product-title">
                        <h4>
                          <a href="product-details-6.html">WOODEN FURNITURE</a>
                        </h4>
                      </div>
                      <div class="product-price">
                        <span>$140.00</span>
                      </div>
                    </div>
                    <div class="product-cart-categori">
                      <div class="product-cart">
                        <span>Furniter</span>
                      </div>
                      <div class="product-categori">
                        <a href="#"><i class="ion-bag"></i> Add to cart</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="home2" role="tabpanel">
            <div class="product-slider-active gutter-space-30 owl-carousel">
              <div class="single-product">
                <div class="product-img">
                  <a href="#"><img src="../assets/picture/5.jpg" alt="" /></a>
                  <span>sale</span>
                  <div class="product-action">
                    <a title="Wishlist" class="animate-left" href="#"
                      ><i class="ion-ios-heart-outline"></i
                    ></a>
                    <a
                      title="Quick View"
                      data-bs-toggle="modal"
                      data-bs-target="#exampleModal"
                      class="animate-right"
                      href="#"
                      ><i class="ion-ios-eye-outline"></i
                    ></a>
                  </div>
                </div>
                <div class="product-content">
                  <div class="product-title-price">
                    <div class="product-title">
                      <h4>
                        <a href="product-details-6.html">WOODEN FURNITURE</a>
                      </h4>
                    </div>
                    <div class="product-price">
                      <span>$150.00</span>
                    </div>
                  </div>
                  <div class="product-cart-categori">
                    <div class="product-cart">
                      <span>Furniter</span>
                    </div>
                    <div class="product-categori">
                      <a href="#"><i class="ion-bag"></i> Add to cart</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="single-product">
                <div class="product-img">
                  <a href="#"><img src="../assets/picture/6.jpg" alt="" /></a>
                  <div class="product-action">
                    <a title="Wishlist" class="animate-left" href="#"
                      ><i class="ion-ios-heart-outline"></i
                    ></a>
                    <a
                      title="Quick View"
                      data-bs-toggle="modal"
                      data-bs-target="#exampleModal"
                      class="animate-right"
                      href="#"
                      ><i class="ion-ios-eye-outline"></i
                    ></a>
                  </div>
                </div>
                <div class="product-content">
                  <div class="product-title-price">
                    <div class="product-title">
                      <h4>
                        <a href="product-details-6.html">WOODEN FURNITURE</a>
                      </h4>
                    </div>
                    <div class="product-price">
                      <span>$160.00</span>
                    </div>
                  </div>
                  <div class="product-cart-categori">
                    <div class="product-cart">
                      <span>Furniter</span>
                    </div>
                    <div class="product-categori">
                      <a href="#"><i class="ion-bag"></i> Add to cart</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="single-product">
                <div class="product-img">
                  <a href="#"><img src="../assets/picture/71.jpg" alt="" /></a>
                  <span>sale</span>
                  <div class="product-action">
                    <a title="Wishlist" class="animate-left" href="#"
                      ><i class="ion-ios-heart-outline"></i
                    ></a>
                    <a
                      title="Quick View"
                      data-bs-toggle="modal"
                      data-bs-target="#exampleModal"
                      class="animate-right"
                      href="#"
                      ><i class="ion-ios-eye-outline"></i
                    ></a>
                  </div>
                </div>
                <div class="product-content">
                  <div class="product-title-price">
                    <div class="product-title">
                      <h4>
                        <a href="product-details-6.html">HANDCRAFTED MUG</a>
                      </h4>
                    </div>
                    <div class="product-price">
                      <span>$170.00</span>
                    </div>
                  </div>
                  <div class="product-cart-categori">
                    <div class="product-cart">
                      <span>Furniter</span>
                    </div>
                    <div class="product-categori">
                      <a href="#"><i class="ion-bag"></i> Add to cart</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="single-product">
                <div class="product-img">
                  <a href="#"><img src="../assets/picture/8.jpg" alt="" /></a>
                  <div class="product-action">
                    <a title="Wishlist" class="animate-left" href="#"
                      ><i class="ion-ios-heart-outline"></i
                    ></a>
                    <a
                      title="Quick View"
                      data-bs-toggle="modal"
                      data-bs-target="#exampleModal"
                      class="animate-right"
                      href="#"
                      ><i class="ion-ios-eye-outline"></i
                    ></a>
                  </div>
                </div>
                <div class="product-content">
                  <div class="product-title-price">
                    <div class="product-title">
                      <h4>
                        <a href="product-details-6.html">HANDCRAFTED MUG</a>
                      </h4>
                    </div>
                    <div class="product-price">
                      <span>$180.00</span>
                    </div>
                  </div>
                  <div class="product-cart-categori">
                    <div class="product-cart">
                      <span>Furniter</span>
                    </div>
                    <div class="product-categori">
                      <a href="#"><i class="ion-bag"></i> Add to cart</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="home3" role="tabpanel">
            <div class="product-slider-active gutter-space-30 owl-carousel">
              <div class="single-product">
                <div class="product-img">
                  <a href="#"><img src="../assets/picture/9.jpg" alt="" /></a>
                  <span>sale</span>
                  <div class="product-action">
                    <a title="Wishlist" class="animate-left" href="#"
                      ><i class="ion-ios-heart-outline"></i
                    ></a>
                    <a
                      title="Quick View"
                      data-bs-toggle="modal"
                      data-bs-target="#exampleModal"
                      class="animate-right"
                      href="#"
                      ><i class="ion-ios-eye-outline"></i
                    ></a>
                  </div>
                </div>
                <div class="product-content">
                  <div class="product-title-price">
                    <div class="product-title">
                      <h4>
                        <a href="product-details-6.html">HANDCRAFTED MUG</a>
                      </h4>
                    </div>
                    <div class="product-price">
                      <span>$190.00</span>
                    </div>
                  </div>
                  <div class="product-cart-categori">
                    <div class="product-cart">
                      <span>Furniter</span>
                    </div>
                    <div class="product-categori">
                      <a href="#"><i class="ion-bag"></i> Add to cart</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="single-product">
                <div class="product-img">
                  <a href="#"><img src="../assets/picture/10.jpg" alt="" /></a>
                  <div class="product-action">
                    <a title="Wishlist" class="animate-left" href="#"
                      ><i class="ion-ios-heart-outline"></i
                    ></a>
                    <a
                      title="Quick View"
                      data-bs-toggle="modal"
                      data-bs-target="#exampleModal"
                      class="animate-right"
                      href="#"
                      ><i class="ion-ios-eye-outline"></i
                    ></a>
                  </div>
                </div>
                <div class="product-content">
                  <div class="product-title-price">
                    <div class="product-title">
                      <h4>
                        <a href="product-details-6.html">HANDCRAFTED MUG</a>
                      </h4>
                    </div>
                    <div class="product-price">
                      <span>$110.00</span>
                    </div>
                  </div>
                  <div class="product-cart-categori">
                    <div class="product-cart">
                      <span>Furniter</span>
                    </div>
                    <div class="product-categori">
                      <a href="#"><i class="ion-bag"></i> Add to cart</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="single-product">
                <div class="product-img">
                  <a href="#"
                    ><img src="../assets/picture/1110.jpg" alt=""
                  /></a>
                  <span>sale</span>
                  <div class="product-action">
                    <a title="Wishlist" class="animate-left" href="#"
                      ><i class="ion-ios-heart-outline"></i
                    ></a>
                    <a
                      title="Quick View"
                      data-bs-toggle="modal"
                      data-bs-target="#exampleModal"
                      class="animate-right"
                      href="#"
                      ><i class="ion-ios-eye-outline"></i
                    ></a>
                  </div>
                </div>
                <div class="product-content">
                  <div class="product-title-price">
                    <div class="product-title">
                      <h4>
                        <a href="product-details-6.html">WOODEN FURNITURE</a>
                      </h4>
                    </div>
                    <div class="product-price">
                      <span>$120.00</span>
                    </div>
                  </div>
                  <div class="product-cart-categori">
                    <div class="product-cart">
                      <span>Furniter</span>
                    </div>
                    <div class="product-categori">
                      <a href="#"><i class="ion-bag"></i> Add to cart</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="single-product">
                <div class="product-img">
                  <a href="#"><img src="../assets/picture/12.jpg" alt="" /></a>
                  <div class="product-action">
                    <a title="Wishlist" class="animate-left" href="#"
                      ><i class="ion-ios-heart-outline"></i
                    ></a>
                    <a
                      title="Quick View"
                      data-bs-toggle="modal"
                      data-bs-target="#exampleModal"
                      class="animate-right"
                      href="#"
                      ><i class="ion-ios-eye-outline"></i
                    ></a>
                  </div>
                </div>
                <div class="product-content">
                  <div class="product-title-price">
                    <div class="product-title">
                      <h4>
                        <a href="product-details-6.html">WOODEN FURNITURE</a>
                      </h4>
                    </div>
                    <div class="product-price">
                      <span>$130.00</span>
                    </div>
                  </div>
                  <div class="product-cart-categori">
                    <div class="product-cart">
                      <span>Furniter</span>
                    </div>
                    <div class="product-categori">
                      <a href="#"><i class="ion-bag"></i> Add to cart</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="home4" role="tabpanel">
            <div class="product-slider-active gutter-space-30 owl-carousel">
              <div class="single-product">
                <div class="product-img">
                  <a href="#"><img src="../assets/picture/6.jpg" alt="" /></a>
                  <span>sale</span>
                  <div class="product-action">
                    <a title="Wishlist" class="animate-left" href="#"
                      ><i class="ion-ios-heart-outline"></i
                    ></a>
                    <a
                      title="Quick View"
                      data-bs-toggle="modal"
                      data-bs-target="#exampleModal"
                      class="animate-right"
                      href="#"
                      ><i class="ion-ios-eye-outline"></i
                    ></a>
                  </div>
                </div>
                <div class="product-content">
                  <div class="product-title-price">
                    <div class="product-title">
                      <h4>
                        <a href="product-details-6.html">WOODEN FURNITURE</a>
                      </h4>
                    </div>
                    <div class="product-price">
                      <span>$140.00</span>
                    </div>
                  </div>
                  <div class="product-cart-categori">
                    <div class="product-cart">
                      <span>Furniter</span>
                    </div>
                    <div class="product-categori">
                      <a href="#"><i class="ion-bag"></i> Add to cart</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="single-product">
                <div class="product-img">
                  <a href="#"><img src="../assets/picture/112.jpg" alt="" /></a>
                  <div class="product-action">
                    <a title="Wishlist" class="animate-left" href="#"
                      ><i class="ion-ios-heart-outline"></i
                    ></a>
                    <a
                      title="Quick View"
                      data-bs-toggle="modal"
                      data-bs-target="#exampleModal"
                      class="animate-right"
                      href="#"
                      ><i class="ion-ios-eye-outline"></i
                    ></a>
                  </div>
                </div>
                <div class="product-content">
                  <div class="product-title-price">
                    <div class="product-title">
                      <h4>
                        <a href="product-details-6.html">HANDCRAFTED MUG</a>
                      </h4>
                    </div>
                    <div class="product-price">
                      <span>$150.00</span>
                    </div>
                  </div>
                  <div class="product-cart-categori">
                    <div class="product-cart">
                      <span>Furniter</span>
                    </div>
                    <div class="product-categori">
                      <a href="#"><i class="ion-bag"></i> Add to cart</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="single-product">
                <div class="product-img">
                  <a href="#"><img src="../assets/picture/10.jpg" alt="" /></a>
                  <span>sale</span>
                  <div class="product-action">
                    <a title="Wishlist" class="animate-left" href="#"
                      ><i class="ion-ios-heart-outline"></i
                    ></a>
                    <a
                      title="Quick View"
                      data-bs-toggle="modal"
                      data-bs-target="#exampleModal"
                      class="animate-right"
                      href="#"
                      ><i class="ion-ios-eye-outline"></i
                    ></a>
                  </div>
                </div>
                <div class="product-content">
                  <div class="product-title-price">
                    <div class="product-title">
                      <h4>
                        <a href="product-details-6.html">WOODEN FURNITURE</a>
                      </h4>
                    </div>
                    <div class="product-price">
                      <span>$160.00</span>
                    </div>
                  </div>
                  <div class="product-cart-categori">
                    <div class="product-cart">
                      <span>Furniter</span>
                    </div>
                    <div class="product-categori">
                      <a href="#"><i class="ion-bag"></i> Add to cart</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="single-product">
                <div class="product-img">
                  <a href="#"><img src="../assets/picture/71.jpg" alt="" /></a>
                  <div class="product-action">
                    <a title="Wishlist" class="animate-left" href="#"
                      ><i class="ion-ios-heart-outline"></i
                    ></a>
                    <a
                      title="Quick View"
                      data-bs-toggle="modal"
                      data-bs-target="#exampleModal"
                      class="animate-right"
                      href="#"
                      ><i class="ion-ios-eye-outline"></i
                    ></a>
                  </div>
                </div>
                <div class="product-content">
                  <div class="product-title-price">
                    <div class="product-title">
                      <h4>
                        <a href="product-details-6.html">HANDCRAFTED MUG</a>
                      </h4>
                    </div>
                    <div class="product-price">
                      <span>$170.00</span>
                    </div>
                  </div>
                  <div class="product-cart-categori">
                    <div class="product-cart">
                      <span>Furniter</span>
                    </div>
                    <div class="product-categori">
                      <a href="#"><i class="ion-bag"></i> Add to cart</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> -->

  <div class="product-collection-area pt-100 pb-50">
    <div class="container">
      <div class="section-title text-center mb-55">
        <h2>New Collection</h2>
        <p>
          It is a long established fact that a reader will be distracted by the
          readable content of a page when look
        </p>
      </div>
      <div class="row">
        <div
          v-for="item in data.shop"
          :key="item"
          class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3"
        >
          <div class="single-product mb-35">
            <div class="product-img">
              <a href="#"
                ><img :src="'http://168.138.163.187' + item.shop_img" alt=""
              /></a>
              <span>sale</span>
              <div class="product-action">
                <a title="Wishlist" class="animate-left" href="#">
                  <el-icon><ShoppingCart /></el-icon>
                </a>
                <a
                  title="Quick View"
                  data-bs-toggle="modal"
                  data-bs-target="#exampleModal"
                  class="animate-right"
                  href="#"
                >
                  <el-icon><View /></el-icon>
                </a>
              </div>
            </div>
            <div class="product-content">
              <div class="product-title-price">
                <div class="product-title">
                  <h4>
                    <a href="product-details-6.html">{{ item.shop_title }}</a>
                  </h4>
                </div>
                <div class="product-price">
                  <span>${{ item.shop_price }}</span>
                </div>
              </div>
              <div class="product-cart-categori">
                <div class="product-cart">
                  <span>New</span>
                </div>
                <div class="product-categori">
                  <a href="#"><i class="ion-bag"></i> Add to cart</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="shop-limited-area bg-img pt-90 pb-100"
    style="background-image: url(.././assets/picture/4.jpg)"
    data-overlay="3"
  >
    <div class="container">
      <div class="shop-limited-content text-center">
        <h2>Shop Limited Edition.</h2>
        <a class="btn-hover limited-btn" href="#">view more</a>
      </div>
    </div>
  </div>
  <!-- <div class="blog-area pb-65">
    <div class="container">
      <div class="section-title text-center mb-55">
        <h2>Top Stories</h2>
        <p>
          It is a long established fact that a reader will be distracted by the
          readable content of a page when look
        </p>
      </div>
      <div class="row">
        <div class="col-lg-4 col-md-6">
          <div class="single-blog mb-30">
            <div class="blog-img">
              <a href="#"><img src="../assets/picture/113.jpg" alt="" /></a>
            </div>
            <div class="blog-info">
              <h3><a href="#">Standard blog post.</a></h3>
              <div class="blog-meta">
                <ul>
                  <li>February 13</li>
                  <li><a href="#">Momen Bhuiyan</a></li>
                  <li><a href="#">4 comments</a></li>
                </ul>
              </div>
              <p>
                Lorem ipsum dolor sit amet, sectetur adipising elit, sed do
                eimod tempor incididunt ut labore.
              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6">
          <div class="single-blog mb-30">
            <div class="blog-img">
              <a href="#"><img src="../assets/picture/26.jpg" alt="" /></a>
            </div>
            <div class="blog-info">
              <h3><a href="#">But I must explain to you.</a></h3>
              <div class="blog-meta">
                <ul>
                  <li>February 13</li>
                  <li><a href="#">Momen Bhuiyan</a></li>
                  <li><a href="#">4 comments</a></li>
                </ul>
              </div>
              <p>
                Lorem ipsum dolor sit amet, sectetur adipising elit, sed do
                eimod tempor incididunt ut labore.
              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6">
          <div class="single-blog mb-30">
            <div class="blog-img">
              <a href="#"><img src="../assets/picture/33.jpg" alt="" /></a>
            </div>
            <div class="blog-info">
              <h3><a href="#">Lorem ipsum dolor sit.</a></h3>
              <div class="blog-meta">
                <ul>
                  <li>February 13</li>
                  <li><a href="#">Momen Bhuiyan</a></li>
                  <li><a href="#">4 comments</a></li>
                </ul>
              </div>
              <p>
                Lorem ipsum dolor sit amet, sectetur adipising elit, sed do
                eimod tempor incididunt ut labore.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> -->
  <footer class="footer-area gray-bg pt-100 pb-95">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-5 col-12">
          <div class="footer-widget">
            <div class="footer-widget-l-content">
              <h4>20 Years Experience</h4>
              <ul>
                <li>
                  <a href="#"><i class="ion-social-twitter"></i></a>
                </li>
                <li>
                  <a href="#"><i class="ion-social-tumblr"></i></a>
                </li>
                <li>
                  <a href="#"><i class="ion-social-facebook"></i></a>
                </li>
                <li>
                  <a href="#"><i class="ion-social-instagram-outline"></i></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-7 col-12">
          <div class="footer-widget">
            <div class="footer-widget-m-content text-center">
              <div class="footer-logo">
                <a href="#"><img src="../assets/picture/logo.png" alt="" /></a>
              </div>
              <div class="footer-nav">
                <nav>
                  <ul>
                    <li><a href="#">home</a></li>
                    <li><a href="#">about us</a></li>
                    <li><a href="#">shop </a></li>
                    <li><a href="#"> blog </a></li>
                    <li><a href="#">pages </a></li>
                  </ul>
                </nav>
              </div>
              <p>
                Copyright &copy; 2023.Company name All rights reserved.<a
                  target="_blank"
                  href="https://sc.chinaz.com/moban/"
                  >&#x7F51;&#x9875;&#x6A21;&#x677F;</a
                >
              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-12 col-12">
          <div class="footer-widget f-right">
            <div class="footer-widget-r-content">
              <ul>
                <li><span>Phone :</span> +00 123 54 0056</li>
                <li><span>Email : </span> <a href="#">neha@gmail.com</a></li>
                <li><span>Address :</span> Dhaka Bangladesh</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- modal -->
  <div
    class="modal fade"
    id="exampleModal"
    tabindex="-1"
    role="dialog"
    aria-hidden="true"
  >
    <button
      type="button"
      class="close"
      data-bs-dismiss="modal"
      aria-label="Close"
    >
      <span class="ion-android-close" aria-hidden="true"></span>
    </button>
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <div class="qwick-view-left">
            <div class="quick-view-learg-img">
              <div class="quick-view-tab-content tab-content">
                <div
                  class="tab-pane active show fade"
                  id="modal1"
                  role="tabpanel"
                >
                  <img src="../assets/picture/l1.jpg" alt="" />
                </div>
                <div class="tab-pane fade" id="modal2" role="tabpanel">
                  <img src="../assets/picture/l2.jpg" alt="" />
                </div>
                <div class="tab-pane fade" id="modal3" role="tabpanel">
                  <img src="../assets/picture/l3.jpg" alt="" />
                </div>
              </div>
            </div>
            <div class="quick-view-list nav" role="tablist">
              <a
                class="active"
                href="#modal1"
                data-bs-toggle="tab"
                role="tab"
                aria-selected="true"
                aria-controls="home1"
              >
                <img src="../assets/picture/s1.jpg" alt="" />
              </a>
              <a
                href="#modal2"
                data-bs-toggle="tab"
                role="tab"
                aria-selected="false"
                aria-controls="home2"
              >
                <img src="../assets/picture/s2.jpg" alt="" />
              </a>
              <a
                href="#modal3"
                data-bs-toggle="tab"
                role="tab"
                aria-selected="false"
                aria-controls="home3"
              >
                <img src="../assets/picture/s3.jpg" alt="" />
              </a>
            </div>
          </div>
          <div class="qwick-view-right">
            <div class="qwick-view-content">
              <h3>Handcrafted Supper Mug</h3>
              <div class="price">
                <span class="new">$90.00</span>
                <span class="old">$120.00 </span>
              </div>
              <div class="rating-number">
                <div class="quick-view-rating">
                  <i class="ion-ios-star red-star"></i>
                  <i class="ion-ios-star red-star"></i>
                  <i class="ion-android-star-outline"></i>
                  <i class="ion-android-star-outline"></i>
                  <i class="ion-android-star-outline"></i>
                </div>
                <div class="quick-view-number">
                  <span>2 Ratting (S)</span>
                </div>
              </div>
              <p>
                Lorem ipsum dolor sit amet, consectetur adip elit, sed do tempor
                incididun ut labore et dolore magna aliqua. Ut enim ad mi , quis
                nostrud veniam exercitation .
              </p>
              <div class="quick-view-select">
                <div class="select-option-part">
                  <label>Size*</label>
                  <select class="select">
                    <option value="">- Please Select -</option>
                    <option value="">900</option>
                    <option value="">700</option>
                  </select>
                </div>
                <div class="select-option-part">
                  <label>Color*</label>
                  <select class="select">
                    <option value="">- Please Select -</option>
                    <option value="">orange</option>
                    <option value="">pink</option>
                    <option value="">yellow</option>
                  </select>
                </div>
              </div>
              <div class="quickview-plus-minus">
                <div class="cart-plus-minus">
                  <input
                    type="text"
                    value="02"
                    name="qtybutton"
                    class="cart-plus-minus-box"
                  />
                </div>
                <div class="quickview-btn-cart">
                  <a class="btn-hover-black" href="#">add to cart</a>
                </div>
                <div class="quickview-btn-wishlist">
                  <a class="btn-hover" href="#"
                    ><i class="ion-ios-heart-outline"></i
                  ></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="clickable-mainmenu-btn">
    <a class="clickable-mainmenu-active" href="#"
      ><i class="ion-navicon"></i
    ></a>
  </div>
  <div class="clickable-mainmenu text-center">
    <div class="clickable-mainmenu-icon">
      <button class="clickable-mainmenu-close">
        <span class="ion-android-close"></span>
      </button>
    </div>
    <div id="menu" class="text-start">
      <ul>
        <li>
          <a href="#">home</a>
          <ul>
            <li>
              <a href="">furniture</a>
            </li>
            <li>
              <a href="index-electronics.html">electronics</a>
            </li>
            <li>
              <a href="index-fashion.html">fashion</a>
            </li>
            <li>
              <a href="index-food-drink.html">food & drink</a>
            </li>
            <li>
              <a href="index-jewellery.html">jewellery</a>
            </li>
            <li>
              <a href="index-toys.html">Toys & Games</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="about-us.html">about us</a>
        </li>
        <li>
          <a href="#">shop</a>
          <ul>
            <li>
              <a href="#">shop grid</a>
              <ul>
                <li>
                  <a href="shop-grid-view-3-col.html">grid 3 column</a>
                </li>
                <li>
                  <a href="shop-grid-view-5-col.html">grid 5 column</a>
                </li>
                <li>
                  <a href="shop-grid-view-sidebar.html">grid with sidebar</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">shop list</a>
              <ul>
                <li>
                  <a href="shop-list-view-1-col.html">list 1 column</a>
                </li>
                <li>
                  <a href="shop-list-view-2-col.html">list 2 column</a>
                </li>
                <li>
                  <a href="shop-list-view-sidebar.html">list with sidebar</a>
                </li>
                <li>
                  <a href="shop-list-view-1-col-container.html"
                    >list 1 column box</a
                  >
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">product details</a>
          <ul>
            <li>
              <a href="product-details.html">tab style 1</a>
            </li>
            <li>
              <a href="product-details-2.html">tab style 2</a>
            </li>
            <li>
              <a href="product-details-3.html">tab style 3</a>
            </li>
            <li>
              <a href="product-details-4.html">fixed image style</a>
            </li>
            <li>
              <a href="product-details-5.html">fixed image style 2</a>
            </li>
            <li>
              <a href="product-details-6.html">sticky style</a>
            </li>
            <li>
              <a href="product-details-7.html">sticky style 2</a>
            </li>
            <li>
              <a href="product-details-8.html">gallery style</a>
            </li>
            <li>
              <a href="product-details-9.html">gallery style 2</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">blog</a>
          <ul>
            <li>
              <a href="blog.html">blog </a>
            </li>
            <li>
              <a href="blog-2-col.html">blog 2 column</a>
            </li>
            <li>
              <a href="blog-left-sidebar.html">blog left sidebar</a>
            </li>
            <li>
              <a href="blog-details.html">blog details</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">pages</a>
          <ul>
            <li>
              <a href="about-us.html">about us</a>
            </li>
            <li>
              <a href="cart.html">cart</a>
            </li>
            <li>
              <a href="checkout.html">checkout</a>
            </li>
            <li>
              <a href="wishlist.html">wishlist</a>
            </li>
            <li>
              <a href="contact.html">contact</a>
            </li>
            <li>
              <a href="login.html">login</a>
            </li>
            <li>
              <a href="register.html">register</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import MenuHeader from "../components/MenuHeader.vue";
import { shopSwiper, shopType, show } from "../api/shop";
import { ShoppingCart, View } from "@element-plus/icons-vue";
// 轮播图
const data = reactive({
  banner: [],
  type: [],
  shop: [],
});
shopSwiperApi();
async function shopSwiperApi() {
  const res = await shopSwiper("get", "", "");
  console.log(res);
  if (res.status == 200) {
    data.banner = res.data.data;
  }
}
shopTypeApi();
async function shopTypeApi() {
  const res = await shopType("get", "", "");
  console.log(res);
  if (res.status == 200) {
    data.type = res.data.data;
  }
}
showApi();
async function showApi() {
  const res = await show("post", "", {
    page: 1,
    limit: 8,
    shop_type: "",
    shop_brand: "",
    shop_style: "",
    shop_H_M: "",
  });
  console.log(res);
  if (res.status == 200) {
    data.shop = res.data.data;
  }
}
</script>

<style scoped>
.slider-li {
  width: 100vw;
  height: 500px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.slider-li img {
  width: 100%;
  height: auto;
}
</style>